<template>
  <div>
    <van-nav-bar
  left-text="返回"
  left-arrow
  @click-left="onClickLeft"
/>
<!-- 点击返回跳转到正在热映路由 -->

<div class="banner" >
    <img :src="list.poster" alt="">
</div>
<div class="infobox">
   <div class="title">
    <div>{{list.name}}</div>
    <div>{{list.grade}}<span>分</span></div>
   </div>
    <div class="item">{{list.category}}</div>
    <div class="item">{{new Date(list.premiereAt*1000).getFullYear()}}年{{new Date(list.premiereAt*1000).getMonth()+1 }}月{{new Date(list.premiereAt*1000).getDate() }}日</div>
    <div class="item">{{list.nation}}|{{list.runtime}}分钟</div>
    <div class="item">{{list.synopsis}}</div>
</div>
  <div class="imgbox">
    <div class="actva">演职人员</div>
    <div class="actors swiper" id="actors">
      <ul v-if="list.actors" class="swiper-wrapper">
        <li v-for="(item,index) in list.actors" :key="index" class="swiper-slide"  >
        <div >
          <img :src="item.avatarAddress" alt="" >
          </div>
          <span>{{item.name}}</span>
          <span>{{item.role}}</span>
        </li>
      </ul>
    </div>
  </div>

<div class="imgbox">
    <div class="actv">剧照</div>
    <div class="still swiper" id="still">
      <ul v-if="list.actors" class="swiper-wrapper" >
        <li v-for="(item,index) in list.photos" :key="index" class="swiper-slide">
          <!-- 点击图片的时候传index就是对应的那张图片 -->
        <div @click="clickOnThe(index)">
          <img :src="item" alt="">
          </div>
        </li>
      </ul>
    </div>
  </div>
  <div class="empty"></div>
  <a class="but">在线选座</a>
  </div>
</template>

<script>
//导入轮播图插件
import Swiper from 'swiper'
//导入轮播图样式
import 'swiper/dist/css/swiper.css'
//图片预览的插件
import { ImagePreview } from 'vant';
export default {
  data(){
    return{
      //定义一个空对象
      list:{}
    }

  },
  methods:{

    //上面调用此方法点击的时候跳转到首页
    onClickLeft(){
         this.$router.replace({path:"/"})
    },
    //接收上面点击的时候传下来的值并做图片预览效果
    clickOnThe(ix){
      ImagePreview({
            images: this.list.photos,
               startPosition: ix,
                 });
    }
  },

  mounted(id){
    // 发起请求并需要传值通过id拿到对应的值 id是在正在热映点击的时候传过来的值
    this.$http.get('filmInfo',{params:{filmId:this.$route.params.id}}).then(res=>{
        // console.log(this.$route.params.id);
        // console.log(res); 
        //如果status为0则代表拿到数据
        if(res.status==0){
          //把拿到的数据赋值给在data中定义的空对象
            this.list = res.data.film
            //调用轮播图的点击方法
    this.$nextTick(()=>{
       var swiper = new Swiper("#actors", {
        slidesPerView: 3,
        spaceBetween: 5,
        freeMode: true,
      });
       var swiper = new Swiper("#still", {
        slidesPerView: 2,
        spaceBetween: 10,
        freeMode: true,
      });
          } )
        }
    })
    
    
  }
}
</script>





  <style scoped>
  .infobox{
    box-sizing: border-box;
    background: #fff;
    padding: 15px 10px;
  }
  .banner>img{
      width: 100%;
      transform: translateY(-180px);
    }
  .banner{
    width: 100%;
    height: 200px;
    overflow: hidden;
  }
  .title{
    display: flex;
    justify-content: space-between;
  }
  .title>div:first-child{
    color: #191a1b;
    font-size: 18px; 
  }
  .title>div:last-child{
    color: #ffb232;;
    font-size: 18px;
    font-style: italic;
  }
  .title>div>span{
    font-size: 12px;
  }
  .item{
    font-size: 12px;
    color:  #797d82;
    margin-top: 5px;
  }
  .imgbox{
    box-sizing: border-box;
   
    padding:10px ;
    background: #fff;
    overflow: hidden;
  }
  .actv{
    font-size:16px;
    color: #000;
  }
  .actors{
    margin-top: 15px;
  }
  .actors>ul{
    display: flex;
   }
  .actors>ul>li{
    width: 100px !important;
     display: inline-flex;
     flex-direction: column;
     align-items: center;
     margin-right: 10px;
    }
  .actors>ul>li>div{
    width: 90px;
    height: 90px;
    overflow: hidden;
  }
  .actors>ul>li>div>img{
    width: 100%;
    transform: translateY(-8px);
  }
  .actors>ul>li>span{
    color: #191a1b;
    font-size: 13px;
    font-weight: 300;
  }

  .still{
    margin-top: 15px;
  
  }
  .still>ul{
    display: flex;
   }
  .still>ul>li{
     width: 150px !important;
     display: inline-flex;
     flex-direction: column;
     align-items: center;
     margin-right: 10px;
    }
  .still>ul>li>div{
    width: 150px;
    height: 100px;
    overflow: hidden;
  }
  .still>ul>li>div>img{
    width: 100%;
  
  }
  .empty{
    height: 60px;
  }
  .but{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background: #f60;
    text-align: center;
    color: #fff;
    line-height: 50px;
      z-index: 2;
  }
  
  </style>
